<template>
  <div>
    <div>试一下canvas</div>
    <canvas></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 获取canvas元素
      let canvas = document.querySelector("canvas");
      // 获取画笔
      let ctx = canvas.getContext("2d");
      // 获取屏幕的宽高
      let width = window.innerWidth;
      let height = window.innerHeight;
      // 设置canvas的宽高
      canvas.width = width;
      canvas.height = height;
      //开始绘画,尝试绘画直线
      // ctx.beginPath();
      // ctx.moveTo(10, 10);
      // ctx.lineTo(100, 100);
      // ctx.stroke();

      //绘制矩形
      // ctx.fillRect(x, y, width, height);
      // x: 矩形左上角的 X 坐标。
      // y: 矩形左上角的 Y 坐标。
      // width: 矩形的宽度（向右延伸的距离）。
      // height: 矩形的高度（向下延伸的距离）。
      // ctx.fillRect(100, 100, 150, 150);
      // ctx.strokeRect(100, 100, 50, 100);

      //绘制圆形
      // 通过使用 arc(x,y,radius,startAngle,endAngle,anticlockwise)方法来绘制圆形。
      // 其中 x 和 y 是圆心的坐标，radius 是半径
      // startAngle 和 endAngle 是起始角度和结束角度（以弧度为单位）
      // anticlockwise 是一个布尔值，表示是否逆时针绘制。
      // ctx.beginPath();
      // ctx.strokeStyle = "red"; //设置颜色一般在绘制之前设置颜色 fillStyle 和 strokeStyle 都是设置颜色，但是 fillStyle 是填充颜色，strokeStyle 是描边颜色
      // ctx.lineWidth = 5; //设置线条的宽度
      // ctx.arc(200, 200, 100, 0, 2 * Math.PI);
      // ctx.stroke();
      // ctx.closePath();

      // ctx.beginPath();
      // ctx.moveTo(100, 100);
      // ctx.lineTo(120, 140);
      // ctx.lineTo(140, 100);
      // ctx.lineTo(160, 140);
      // ctx.lineTo(180, 100);
      // ctx.lineTo(100, 100);
      // ctx.stroke();
      // ctx.closePath();

      // ctx.translate(x,y)    平移
      // ctx.rotate(angle)      旋转
      // ctx.scale(x,y)       缩放

      // ctx.fillRect(200, 200, 50, 50);
      // ctx.translate(50, 50);
      // ctx.fillRect(200, 200, 50, 50);

      // ctx.fillRect(200, 200, 50, 50);
      // ctx.rotate(Math.PI / 4); // 旋转 45 度
      // ctx.fillRect(200, 200, 50, 50);

      // ctx.fillRect(10, 10, 50, 50);
      // ctx.scale(2, 2);
      // ctx.fillRect(10, 10, 50, 50);

      // ctx.fillRect(10, 10, 50, 50);
      // ctx.translate(50, 50);
      // ctx.rotate(Math.PI / 4);
      // ctx.scale(2, 2);
      // ctx.fillRect(10, 10, 50, 50);

      //再canvas上面绘制图片
      // let img = new Image();
      // img.src = require("@/assets/logo.jpg");
      // img.onload = function () {
      //   // drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
      //   // 从源图像中截取一部分（由 sx, sy, sWidth, sHeight 指定），并在目标位置（dx, dy）绘制
      //   // 同时可以指定目标宽度和高度（dWidth, dHeight）进行缩放
      //   // ctx.drawImage(img, 100, 100);

      //   ctx.drawImage(img, 50, 50, 100, 100, 0, 0, 200, 200);
      // };

      //动画效果
      // var x = 0;
      // var intervalId = setInterval(function () {
      //   ctx.clearRect(0, 0, canvas.width, canvas.height);
      //   ctx.fillRect(x, 50, 50, 50);
      //   x += 5;
      //   if (x > canvas.width) {
      //     clearInterval(intervalId);
      //   }
      // }, 50);

      //绑定事件
      // canvas.addEventListener("click", function (event) {
      //   var x = event.offsetX;
      //   var y = event.offsetY;
      //   console.log("鼠标点击位置：(" + x + ", " + y + ")");
      // });

      // document.addEventListener("keydown", function (event) {
      //   console.log("按下的键：" + event.key);
      // });

      var isDragging = false;
      var startX, startY, offsetX, offsetY;
      var rect = { x: 50, y: 50, width: 100, height: 100 };

      ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
      canvas.addEventListener("mousedown", function (event) {
        var x = event.offsetX;
        var y = event.offsetY;
        if (
          x >= rect.x &&
          x <= rect.x + rect.width &&
          y >= rect.y &&
          y <= rect.y + rect.height
        ) {
          isDragging = true;
          startX = x;
          startY = y;
          offsetX = rect.x - startX;
          offsetY = rect.y - startY;
        }
      });

      canvas.addEventListener("mousemove", function (event) {
        if (isDragging) {
          var x = event.offsetX;
          var y = event.offsetY;
          rect.x = x + offsetX;
          rect.y = y + offsetY;
          draw();
        }
      });

      canvas.addEventListener("mouseup", function (event) {
        isDragging = false;
      });

      var scaleFactor = 1;
      canvas.addEventListener("wheel", function (event) {
        var delta = event.deltaY > 0 ? -0.01 : 0.01;
        scaleFactor += delta;
        rect.width *= scaleFactor;
        rect.height *= scaleFactor;
        draw();
      });
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
      }
    },
  },
};
</script>

<style scoped></style>
